import React from "react";
import './index.css'

const STATUS = {
    odd: 1,
    even: 2,
    normal: 0
}

const btns = [
    {label: '奇数', status: STATUS.odd},
    {label: '偶数', status: STATUS.even},
    {label: '正常', status: STATUS.normal},
]
class NumberList extends React.Component {
    state = {
        start: STATUS.normal,
    }

    onStatusChange = (status) => {
        this.setState({ status })
    };

    renderBtns = () => {
        const { status } = this.state;
        return btns.map(btn => {
            const {status: btnStatus, label} = btn;
            return (
                <button
                className='btn-primary'
                key={btnStatus}
                style={{color: status === btnStatus ? 'red' : ''}}
                onClick={() => this.onStatusChange(btnStatus)}
                >
                    {label}
                </button>
            );
        });
    };

    renderList = () => {
        const {status} = this.state;
        const list = [2, 4, 6, 8, 10];
        return list.map((item, index) => {
            let isEvent = false;
            if (
                (status === STATUS.odd && !(index % 2)) ||
                (status === STATUS.even && !!(index % 2))
            ) {
                isEvent = true;
            }
            const cls = `line ${isEvent ? 'event' : ''}`;
            return (
                <p key={item} className={cls}>
                    {item}
                </p>
            );
        });
    };

    render() {
        return (
            <>
                {this.renderBtns()}
                {this.renderList()}
            </>
        )
    }    
}

export default NumberList;